<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    table {
      width: 600px;
      cursor: pointer;
    }

    table td {
      text-align: center;
    }

    table th {
      background-color: blueviolet;
    }

    table tr {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="dv">
    请输入姓名:
    <input type="text" value="" id="uname" />
    <br /> 请输入邮箱:
    <input type="text" value="" id="email" />
  </div>

  <input type="button" value="添加" id="btn" />
  <table border="1" cellpadding="0" cellspacing="0" id="tb">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody id="tbd">
      <!-- <tr>
        <td>小黑</td>
        <td>xiaohei@126.com</td>
      </tr> -->
    </tbody>
  </table>
  <script>


    var btn = document.getElementById('btn');
    var uname = document.getElementById('uname');
    var email = document.querySelector('#email');

    console.log(email);
    btn.onclick = function () {
      if (uname.value == '' || email.value == '') {
        alert('请输入内容');

      }
      // 创建行
      var tr = document.createElement('tr');
      // 添加到tbd里
      var tbd = document.getElementById('tbd');
      tbd.appendChild(tr);
      // 创建两个单元格
      var td1 = document.createElement('td');
      td1.innerHTML = uname.value;
      var td2 = document.createElement('td');
      td2.innerHTML = email.value;
      // 添加到行里
      tr.appendChild(td1);
      tr.appendChild(td2);


    }






  </script>

</body>

</html>